<template>
	<view class="content">
		<view class="scrollLeft">
			<!-- 一级循环 -->
			<view scroll-y="true" class="pronames_one"
				v-for="(item,FirstLevelClassificationIndex) in FirstLevelClassifiedList"
				:key="FirstLevelClassificationIndex" :class="item.open?'oneshow':'onehide'">
				<view class="pronames-one-label" @click="controller(FirstLevelClassificationIndex)">
					<view class="first-menue">
						<view class="FirstLevelClassificationName">{{item.FirstLevelClassificationName}}</view>
						<image v-if="item.open" class="icon" src="../../static/image/server-icon/open.png"></image>
						<image v-else class="icon" src="../../static/image/server-icon/close.png"></image>
					</view>
					<!-- {{FirstLevelClassificationIndex}} -->
				</view>



				<!-- 二级循环 -->
				<view class="pronames_two"
					v-for="(item2,SecondLevelClassificationIndex) in item.SecondLevelClassifiedList"
					:key="item2.SecondLevelClassifiedId">
					<!-- 点击二级时，openServer方法传递的分别是一级分类的下标和二级分类的ID -->
					<view class="pronames-two-label" :class="item2.SecondLevelClassifiedId == tabIndex ? 'active' : ''"
						@click="clickSecondaryMenu(item2.SecondLevelClassifiedId)">
						<view class="SecondLevelClassificationNameViewStyle">
							{{item2.SecondLevelClassificationName}}
							<!-- {{item2.SecondLevelClassifiedId}} {{SecondLevelClassificationIndex}} -->
						</view>
					</view>
				</view>
			</view>
		</view>


		<!--:scroll-into-view="clickId" ====> 值应为某子元素id（id不能以数字开头）   设置哪个方向可滚动，则在哪个方向滚动到该元素 -->
		<!-- @scrolltolower:滚动到底部/右边，会触发 scrolltolower 事件   @scrolltolower="scrolltolower"-->
		<scroll-view class="scrollRight" scroll-y="true" :scroll-into-view="clickId" :scroll-with-animation="true"
			@scroll="scroll" >
			<view id="tapIndex" class="itemListRight" v-for="(item, index) in 14" :key="index">
				<!-- :id 自定义属性 -->
				<view class="title" :id="'pointer' + index">item:{{item}} ===== index:{{index}}</view>
				<view class="layoutStyle" v-for="(item, index) in 8">
					<serverItem class="serverItemStyle" serverName="挖掘机"></serverItem>
				</view>
			</view>
		</scroll-view>
	</view>
</template>

<script>
	export default {
		name: "serverList",
		data() {
			return {
				tabIndex: 0, //二级菜单初始 激活 高亮背景样式 的下标
				clickId: '', //配合scroll-into-view使用的唯一的ID属性
				topList: [],//存储每一个.title 元素上边距的数组
				isLeftClick: false,
				getComputedTotals: [],
				// FirstLevelFlag: 0,
				// SecondLevelFlag: 0,
				FirstLevelClassifiedList: [{
					FirstLevelClassificationId: 1,
					FirstLevelClassificationName: "预防维修",
					open: false,
					SecondLevelClassifiedList: [{
						SecondLevelClassifiedId: 0,
						SecondLevelClassificationName: "零件调整",
					}, {
						SecondLevelClassifiedId: 1,
						SecondLevelClassificationName: "设备清洗",
					}, {
						SecondLevelClassifiedId: 2,
						SecondLevelClassificationName: "设备清洗",
					}]
				}, {
					FirstLevelClassificationId: 2,
					FirstLevelClassificationName: "机械维修",
					open: false,
					SecondLevelClassifiedList: [{
						SecondLevelClassifiedId: 3,
						SecondLevelClassificationName: "挖掘机械",
					}, {
						SecondLevelClassifiedId: 4,
						SecondLevelClassificationName: "运输机械",
					}, {
						SecondLevelClassifiedId: 5,
						SecondLevelClassificationName: "起重机械",
					}, {
						SecondLevelClassifiedId: 6,
						SecondLevelClassificationName: "压实机械",
					}, {
						SecondLevelClassifiedId: 7,
						SecondLevelClassificationName: "桩工机械",
					}, {
						SecondLevelClassifiedId: 8,
						SecondLevelClassificationName: "路面机械",
					}, {
						SecondLevelClassifiedId: 9,
						SecondLevelClassificationName: "其他机械",
					}]
				}, {
					FirstLevelClassificationId: 3,
					FirstLevelClassificationName: "其他维修",
					open: false,
					SecondLevelClassifiedList: [{
						SecondLevelClassifiedId: 10,
						SecondLevelClassificationName: "表面修复",
					}, {
						SecondLevelClassifiedId: 11,
						SecondLevelClassificationName: "涂装修复",
					}, {
						SecondLevelClassifiedId: 12,
						SecondLevelClassificationName: "设备修复",
					}]
				}]
			}
		},
		
		onReady() {
			this.getNodesInfo();
		},
		methods: {
			/**
			 * 控制一级菜单的展开和收起
			 */
			controller(index) {
				let FirstLevelClassifiedList = this.FirstLevelClassifiedList;
				if (FirstLevelClassifiedList[index]['open'] == false) {
					FirstLevelClassifiedList[index]['open'] = true;
				} else {
					FirstLevelClassifiedList[index]['open'] = false;
				}
			},
			/**
			 * 点击二级菜单时的处理逻辑
			 */
			clickSecondaryMenu(SecondLevelIndex) {
				console.log("clickSecondaryMenu函数打印======>", SecondLevelIndex)
				this.clickId = 'pointer' + SecondLevelIndex; //拼接左侧被点击的Id给右侧用
				this.tabIndex = SecondLevelIndex;
				this.isLeftClick = true;
			},
			scroll(e) {
				// console.log("滚动事件e=====>",e)
				console.log("滚动事件e.target=====>", e.target)
				console.log("滚动事件e.detail.scrollTop=====>", e.detail.scrollTop)
				
				
				//滚动的时候进行判断，如果左侧是选中状态，则先取消
				if (this.isLeftClick) {
					this.isLeftClick = false;
					return;
				}
				let scrollTop = e.detail.scrollTop;//右侧服务标题title距离顶部的距离参数
				for (let i = 0; i < this.topList.length; i++) {//从所有title距离顶部的数组中，查找符合位置的距离参数，赋值给tabIndex,判断右侧滑动到第几个title,左侧根据tabIndex做出联动处理
					let h1 = this.topList[i];
					let h2 = this.topList[i + 1];
					if (scrollTop > h1 && scrollTop < h2) {
						this.tabIndex = i;
						// let FirstLevelClassifiedList = this.FirstLevelClassifiedList;
						// if (FirstLevelClassifiedList[i]['open'] == false) {
						// 	FirstLevelClassifiedList[i]['open'] = true;
						// } else {
						// 	FirstLevelClassifiedList[i]['open'] = false;
						// }
					}
				}
			},
			getNodesInfo() {
				// const query = uni.createSelectorQuery().in(this);：首先创建一个选择器查询对象 query，并通过 .in(this) 将查询范围限制在当前组件内（this 表示当前组件实例）。
				const query = uni.createSelectorQuery().in(this);
				// 使用createSelectorQuery来获取页面上所有class为.title的元素的位置信息，并将这些位置信息存储在this.topList中。
				query.selectAll('.title')
				//使用 .boundingClientRect() 方法获取所选元素的位置信息，包括元素的上边距、下边距、左边距、右边距、宽度和高度等信息。
					.boundingClientRect()
					// .exec(res => { ... })：使用 .exec 方法执行查询操作，并在操作完成后调用回调函数 res => { ... } 处理结果。
					.exec(res => {
						// 获取查询结果 res，其中 res[0] 包含了所有 .title 元素的位置信息。
						let nodes = res[0];
						let arr = [];
						// 遍历 nodes 数组，将每个 .title 元素的上边距（item.top）添加到 arr 数组中。
						nodes.map(item => {
							arr.push(item.top);
						});
						// 将得到的 .title 元素上边距的数组 arr 赋值给组件的 this.topList 属性，以便在组件的其他地方使用这些位置信息。
						this.topList = arr;
					});
			},
		},
		computed: {

		},
		onLoad() {
		},
	}
</script>

<style lang="scss">
	page {
		background: #fff;
	}

	.content {
		display: flex;

		.scrollLeft {
			background-color: #efefef;
			// border: 1px solid black;
			width: 250rpx;
			height: 84vh;
			overflow: scroll;

			/* 一级 */
			.pronames_one {
				width: 100vw;
				height: auto;

				.pronames-one-label {
					width: 100vw;
					height: 110rpx;
					line-height: 110rpx;
					box-sizing: border-box;
					padding: 0px 3%;
					display: flex;
					flex-direction: row;
					justify-content: space-between;
					align-items: center;
					border-bottom: 1px #eaeaea solid;

					.first-menue {
						display: flex;
						align-items: center;
						justify-content: space-between;

						.FirstLevelClassificationName {
							font-size: 15px;
							color: black;
							padding-left: 10rpx;
						}

						.icon {
							display: flex;
							margin-left: 50rpx;
							width: 50rpx;
							height: 50rpx;
						}
					}
				}


				/* 二级 */
				.pronames_two {
					// padding-left: 60rpx;
					width: 100vw;
					height: auto;
					transition: all 0.5s;
					background-color: #f7f7f7;

					.pronames-two-label {
						width: 100vw;
						height: 110rpx;
						line-height: 110rpx;
						display: flex;
						flex-direction: row;
						justify-content: space-between;
						box-sizing: border-box;
						padding: 0px 3%;
						/* border-bottom: 1px #eee solid; */

						.SecondLevelClassificationNameViewStyle {
							padding-left: 60rpx;
							font-size: 15px;
							color: #333;
						}
					}
				}

				.active {
					background-color: #aaaaff;
					// color: #2ebbfe;
				}
			}
		}


		.scrollRight {
			// border: 1px solid #333;
			width: 470rpx;
			height: 86vh;
			margin-left: 20rpx;

			.itemListRight {
				min-height: 1200rpx;
				margin-bottom: 50rpx;
				display: flex;
				flex-wrap: wrap;
				overflow: hidden;
				background-color: #ffffff;
			}
		}

		.layoutStyle {
			display: flex;
		}

		.serverItemStyle {
			margin: 5rpx 10rpx;
			width: 180rpx;
			height: 180rpx;
		}
	}


	.title {
		width: 100vw;
		display: flex;
		align-items: center;
	}


	/* 三级 */
	// .pronames_three {
	// 	width: 100%;
	// 	height: auto;
	// }

	// .pronames_three-label {
	// 	width: 97%;
	// 	margin-left: 3%;
	// 	height: 100rpx;
	// 	line-height: 100rpx;
	// 	display: flex;
	// 	flex-direction: row;
	// 	border-bottom: 1px #f1f1f1 solid;
	// 	align-items: center;
	// }

	// .pronames_three-label text {
	// 	width: 90%;
	// 	font-size: 15px;
	// 	color: #868686;
	// }

	/* 展开收起效果 start */
	.oneshow {}

	.oneshow .pronames_two {
		display: block;
	}

	.onehide {}

	.onehide .pronames_two {
		display: none;
	}

	/* 展开收起效果 end */
	.twoshow {}

	.twoshow .pronames_three {
		display: block;
	}

	.twohide {}

	.twohide .pronames_three {
		display: none;
	}
</style>
